<template>
  <div style="letter-spacing: 1px">
    <div class="content" :key="key">
      <!-- 一级评论 -->
      <div class="first" v-for="(item, index) in comments" :key="index">
        <a href="javascript:;" class="first-img">
          <!-- 如果当前用户有头像则显示头像,没有则显示默认头像 -->
          <img v-if="item.memberIcon" :src="item.memberIcon" alt=""/>
          <img v-else src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt=""/>
        </a>
        <div class="first-content">
          <!-- 一级评论用户昵称 -->
          <h3 class="first-username">{{ item.memberNickName }}</h3>
          <!-- 一级评论发布时间 -->
          <span class="first-time">{{ item.createTime }}</span>
          <!-- 一级评论评论内容 -->
          <p class="first-comment">{{ item.content }}</p>
          <!-- 一级评论评论点赞  @mouseleave="delete_leave(item)" @mouseover="delete_after(item)"-->
          <div class="first-right" >
            <span class="comments">{{item.spuAttributes}}</span>
            <span class="delete" v-if="item.delete" @click="comment_delete(item, '父级', index)">删除</span>
            <span class="comments" @click="comment_input(item)">回复({{item.replyCount}})</span>
            <!-- 一级评论点赞数 -->
            <span class="praise" :class="item.like" @click="comment_like(item, 0)">
              <svg :stroke="item.isLike === 1?'red':'currentColor'" fill="none" stroke-width="2"
                   viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
                   class="h-4 w-4" height="1em" width="1em"
                   xmlns="http://www.w3.org/2000/svg"
                   :ref="'zan'+item.id">
                <path
                    d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                </path>
              </svg>&nbsp;
              <span v-if="item.likesCount">{{ item.likesCount }}</span>
            </span>
          </div>
          <!-- 回复一级评论 -->
          <div class="reply-comment" v-if="item.display">
            <input type="text" placeholder="请输入评论 . . ." v-model="childComments" @keyup.enter="reply_sumbit(item, '父级', index)" @blur="lose(item)"/>
            <!-- 0为回复一级评论 -->
            <button @click="reply_sumbit(item,item.id,  '父级', index)">发表评论</button>
          </div>
          <!-- 次级评论 -->
          <div class="second">
            <ul>
              <li v-for="(reply, sons_index) in item.spuComments" :key="sons_index">
                <div class="top">
                  <!-- 次级评论头像,该用户没有头像则显示默认头像 -->
                  <a href="JavaScript:;" class="second-img">
                    <img v-if="picture" :src="`http://` + picture" alt=""/>
                    <img v-else src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt=""/>
                  </a>
                  <div class="second-content">
                    <!-- 次级评论用户昵称 -->
                    <h3 class="second-username">{{ reply.memberNickName }}</h3>
                    <!-- 次级评论评论时间 -->
                    <span class="second-time">{{ reply.createTime }}</span>
                    <!-- 次级评论内容 xxx回复xxx：评论内容-->
                    <p class="second-comment">{{ reply.content }}</p>
                    <!-- 次级评论评论点赞 @mouseleave="delete_leave(reply)" @mouseover="delete_after(reply)"-->
                    <div class="second-right" >
                      <span class="delete" v-if="reply.delete" @click="comment_delete(reply, '子级',index,sons_index)">
                        删除
                      </span>
                      <!-- 次级评论点赞数 -->
                      <span class="praise" :class="reply.like" @click="comment_like(reply, 1)">
                        <svg :stroke="reply.isLike === 1?'red':'currentColor'" fill="none" stroke-width="2"
                             viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
                             class="h-4 w-4" height="1em" width="1em"
                             xmlns="http://www.w3.org/2000/svg"
                             :ref="'zan'+item.id">
                          <path
                            d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                          </path>
                        </svg>&nbsp;
                        <span v-if="reply.likesCount">{{reply.likesCount }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 暂无评论的空状态 -->
      <el-empty description="暂无评论" v-if="show"></el-empty>
    </div>
    <!-- 页码 -->
    <!-- 	    <div style="text-align: center; margin-top: 15px" v-if="showPage">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalNumber * 10"
              @current-change="currentPage"
              :current-page="page"
            >
            </el-pagination>
          </div> -->
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      skuId: '',
      current: new Date(),	//时间
      picture: '',
      firstComments: '',
      comments: [],
      childComments: '',
      show: false,	//暂无条件显示
      delete: true,	//删除按钮显示
      flag: false,
      like: '',
      display: false,	//显示评论区
      key:0
    }
  },
  methods: {
    obtain() {

    },
    comment_input(m) {
      console.log(m)
      this.comments.forEach(comment=>{
        comment.display =false;
        comment.spuComments.forEach(comment=>{comment.display = false;});
      })
      m.display = true
      this.key += 1;
    },
    comment_like(item,number) {
      console.log(item.id)
      axios({
        url: 'pms/pmsSpuComment/changeCommentLike',
        method: 'post',
        data: {
          commentId: item.id,
        }
      }).then(response => {
        this.queryProComment();
      })
    },
    comment_delete(m, n, w, t) {
      console.log(121)

      // 当前评论的用户id和当前登录的用户id相同时则可删除该条评论
      // this.$set(this.comments[i].reply[j], "delete", false);
      console.log(m)
      console.log(n)	//父级 或者 子级
      console.log(w)	//父级的下标
      console.log(t)	//子级的下标

      if (n == '子级') {
        this.comments[w].reply.splice(t, 1);
      } else if (n == '父级') {
        this.comments.splice(w, 1)
      } else {

      }
    },
    delete_leave(m) {
      m.delete = false
    },
    delete_after(m) {
      console.log(m);
      m.delete = true
    },
    reply_sumbit(m, n, w, c) {
      axios({
        url: 'pms/pmsSpuComment/addComment',
        method: 'post',
        data: {
          pmsSpuComment:m,
          content: this.childComments,
          itemId: n
        }
      }).then(response => {
        if (response.msg != "ok"){
          alert(response.msg)
        }
        this.queryProComment();
        this.childComments = ''
        m.display = false
      })
    },
    //查询评论内容
    queryProComment(){
      axios({
        url: '/pms/pmsSpuComment/queryCommentBySkuId',
        method: 'get',
        params: {
          skuId: this.skuId,
        }
      }).then(response => {
        this.comments = response.data;
        if (this.comments == null || this.comments.length === 0){
          this.show = true;
        }
      })
    }
  },
  created() {
    this.skuId = localStorage.getItem("skuId");
    this.queryProComment();
  }
}
</script>

<style>
/* 评论框 */
.head {
  background-color: rgb(248, 248, 248);
  position: relative;
  height: 75px;
  border-radius: 5px;
}

.head img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 13px;
}

/* 评论框 */
.head input {
  position: absolute;
  top: 13px;
  left: 80px;
  height: 45px;
  border-radius: 5px;
  outline: none;
  width: 65%;
  font-size: 20px;
  padding: 0 20px;
  border: 2px solid #f8f8f8;
}

/* 发布评论按钮 */
.head button {
  position: absolute;
  top: 13px;
  right: 20px;
  width: 120px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
}

/* 鼠标经过字体加粗 */
.head button:hover {
  font-weight: 600;
}

/* 评论内容区域 */
.content .first {
  display: flex;
  position: relative;
  padding: 10px 10px 0px 0;
  text-align: left;
}

.first .first-img {
  flex: 1;
  text-align: center;
}

.first img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.first-username,
.second-username {
  color: #504f4f;
}

.first-content {
  flex: 9;
}

.first-time,
.second-time {
  color: #767575;
}

.first-comment,
.second-comment {
  margin-top: 5px;
}

/* 右边点赞和评论 */
.first-right,
.second-right {
  position: absolute;
  right: 1%;
  top: 10px;
}

.first-right span,
.second-right span {
  margin-right: 20px;
  cursor: pointer;
}

/* 删除评论 */
.delete:hover {
  color: red;
}

/* 评论字体图标 */
.comments::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 4px;
  font-size: 16px;
}

/* 点赞字体图标 */
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 4px;
  font-size: 19px;
}

.second {
  background-color: #f3f3f3;
  margin-top: 10px;
}

.second li {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgb(237, 237, 237);
}

.second .top {
  display: flex;
  position: relative;
}

.second-img {
  flex: 1;
  text-align: center;
}

.to_reply {
  color: rgb(106, 106, 106);
}

.second-content {
  flex: 9;
}

.second .reply_li {
  margin-left: 70px;
}

/* 评论框 */
.reply-comment {
  margin: 10px 0 0 0;
}

.reply-comment input {
  height: 40px;
  border-radius: 5px;
  outline: none;
  width: 70%;
  font-size: 18px;
  padding: 0 20px;
  /* border: 2px solid #f8f8f8; */
  border: 2px solid skyblue;
}

/* 发布评论按钮 */
.reply-comment button {
  width: 15%;
  height: 43px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
  margin-left: 20px;
}

/* 鼠标经过字体加粗 */
.reply-comment button:hover {
  font-weight: 600;
}

/* 评论点赞颜色 */
.comment-like {
  color: red;
}
</style>
